<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>收集表单数据</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <!-- 
    收集表单数据：
      若：<input type="text" />，则v-model收集的是value值，用户输入的就是value值。
      若：<input type="radio" />，则v-model收集的是value值，且要给标签配置value值。
      若：<input type="checkbox" />
        1. 没有配置input的value属性，那么收集的就是checked（勾选or未勾选，是布尔值）
        2. 配置input的value属性：
          (1)v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，是布尔值）
          (2)v-model的初始值是数组，那么收集的就是value组成的数组
      备注：v-model的三个修饰符：
        lazy: 失去焦点再收集数据
        number: 输入字符串转为有效的数字
        trim: 输入首尾空格过滤
   -->
  <div id="root">
    <form @submit.prevent="submit">
      <label for="account">账号：</label>
      <input type="text" id="account" v-model.trim="useInfo.account"> <br/><br/>
      密码：<input type="password" v-model="useInfo.password"> <br/><br/>
      年龄：<input type="number" v-model.number="useInfo.age"> <br/><br/>
      性别：<input type="radio" name="sex" v-model="useInfo.sex" value="male">男 
      <input type="radio" name="sex" v-model="useInfo.sex" value="female">女 <br/><br/>
      爱好：<input type="checkbox" v-model="useInfo.hobby" value="study">学习 
        <input type="checkbox" v-model="useInfo.hobby" value="game">打游戏 
        <input type="checkbox" v-model="useInfo.hobby" value="eat">吃饭 <br/><br/>
      所属校区：<select v-model="useInfo.city">
        <option value="">请选择</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>useInfo.
        <option value="sehnzhen">深圳</option>
      </select> <br/><br/>
      其他信息：<textarea v-model.lazy="useInfo.other" cols="30" rows="10"></textarea> <br/><br/>
      <input type="checkbox" v-model="useInfo.agree">阅读并接受<a href="">《用户协议》</a> <br/><br/>
      <button>提交</button>
    </form>
  </div>
  <script>
    Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示。
    const vm = new Vue({
      el: "#root",
      data: {
        useInfo: {
          account: '',
          password: '',
          age: '',
          sex: "male",
          hobby: [],
          city: '',
          other: '',
          agree: ''
        }
      },
      methods: {
        submit() {
          console.log(JSON.stringify(this.useInfo))
        }
      },
    })
  </script>
</body>
</html>